<template>
  <el-dialog v-model="dialogVisible" title="统计" width="900">
    <el-form ref="queryFormRef" :model="queryForm" :inline="true" :rules="rules">
      <el-form-item label="APP" prop="app">
        <el-select v-model="queryForm.app" placeholder="请选择" style="width: 120px" size="small">
          <el-option label="WA" value="WA" />
          <el-option label="TG" value="TG" />
          <el-option label="VIBER" value="VIBER" />
        </el-select>
      </el-form-item>
      <el-form-item label="app类型" prop="bundle">
        <el-select
          v-model="queryForm.bundle"
          placeholder="请选择"
          style="width: 120px"
          size="small"
          :disabled="queryForm.app && queryForm.app !== 'WA'"
        >
          <el-option label="个人版" value="net.whatsapp.WhatsApp" />
          <el-option
            v-if="queryForm.app === 'WA'"
            label="商务版"
            value="net.whatsapp.WhatsAppSMB"
          />
          <el-option v-if="queryForm.app === 'TG'" label="商务版" value="ph.telegra.Telegraph" />
          <el-option v-if="queryForm.app === 'VIBER'" label="商务版" value="com.viber" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      :height="tableData.length > 12 ? 500 : 'auto'"
    >
      <el-table-column prop="countryName" label="国家">
        <template #default="scope">
          <span v-if="scope.row.countryName && scope.row.countryCode">
            {{ scope.row.countryName }}（{{ scope.row.countryCode }}）
          </span>
          <span v-else-if="scope.row.countryCode">{{ scope.row.countryCode }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalCount" label="总成功数" />
      <el-table-column prop="exported" label="已导出" />
      <el-table-column label="未导出">
        <template #default="scope">
          {{ scope.row.totalCount - scope.row.exported }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { usersActstats } from "@/api/user/index.api";
import useToggle from "@/hooks/useToggle";
const [loading, setLoading] = useToggle();
const [dialogVisible, setDialogVisible] = useToggle();

// const emits = defineEmits(["refresh"]);

const rules = ref({
  app: [{ required: true, message: "请选择APP", trigger: "change" }],
  bundle: [{ required: true, message: "请选择app类型", trigger: "change" }],
});

const queryForm = ref({
  username: "",
  app: "",
  bundle: "",
});

const queryFormRef = ref(null);
const init = (username) => {
  console.log(username, "username");
  tableData.value = [];
  setDialogVisible(true);
  nextTick(() => {
    queryForm.value = {
      username: "",
      app: "",
      bundle: "",
    };
    const value = localStorage.getItem(`${username}_statistics`);

    if (value) {
      const querys = JSON.parse(value);
      queryForm.value.app = querys.app;
      queryForm.value.bundle = querys.bundle;
    }
    queryForm.value.username = username;

    nextTick(() => {
      getList();
    });
  });
};

watch(
  () => queryForm.value.app,
  (newVal) => {
    if (newVal === "WA") {
      queryForm.value.bundle = "";
    } else if (newVal === "TG") {
      queryForm.value.bundle = "ph.telegra.Telegraph";
    } else if (newVal === "VIBER") {
      queryForm.value.bundle = "com.viber";
    }
  }
);

const exported = ref(null);
const totalCount = ref(0);
const tableData = ref([]);
const getList = async () => {
  if (!queryForm.value.username || !queryForm.value.app || !queryForm.value.bundle) return;

  localStorage.setItem(`${queryForm.value.username}_statistics`, JSON.stringify(queryForm.value));

  setLoading(true);
  const res = await usersActstats({
    username: queryForm.value.username || void undefined,
    app: queryForm.value.app || void undefined,
    bundle: queryForm.value.bundle || void undefined,
  }).finally(() => setLoading(false));

  tableData.value = res.byCountry;
  exported.value = res.exported;
  totalCount.value = res.totalCount;
};

// const handleClose = () => {
//   setDialogVisible(false);
// };

defineExpose({
  init,
});
</script>
